<template>
  <div id="index">
    <v-header :platform="platform" :user="user"></v-header>
    <div class="content">
        <v-navigation :modules="modules" @open-view="openView"></v-navigation>
        <v-content :tabs="tabs" :current="current" class="wrapper" @remove-view="removeView" @current-change="currentChange"></v-content>
    </div>
  </div>
</template>

<script>
import header from '../components/header'
import navigation from '../components/navigation'
import content from '../components/content'
export default {
  name: 'index',
  data() {
    return {
      info: {},
      tabs: {},
      current: undefined
    }
  },
  created() {
    this.$http.get('/api/system/config').then((response) => {
      console.log(response.body)
      this.info = {
        modules: response.body.data
      }
    }, response => {
    })
  },
  computed: {
    platform() {
      return this.info.platform
    },
    modules() {
      return this.info.modules
    },
    user() {
      return this.info.user
    }
  },
  methods: {
    /**
     * 打开功能选项卡页面
     */
    openView(data) {
      this.current = data.url
      this.$set(this.tabs, data.url, data.lable)
    },
    /**
     * 删除功能选项卡页面
     */
    removeView(data) {
      this.$delete(this.tabs, data)
    },
    /**
     * 改变当前选中的选项卡页面
     */
    currentChange(data) {
      this.current = data
    }
  },
  components: {
    'v-header': header,
    'v-navigation': navigation,
    'v-content': content
  }
}
</script>

<style lang="less">
.content{
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 0;
  right: 0;
  >*{
    vertical-align: top;
  }
  .wrapper{
    width: 100%;
  }
}
</style>
